<template>
	<view class="homeTop">
		<view class="info" @click="openPopup()">
			<img :src="storeInfo.image" alt="" style="height: 100rpx; width: 100rpx; border-radius: 50%;"/>
			<view class="infos">
				<view class="name" style="font-size: 36rpx;">
					{{storeInfo.name}}
				</view>
				<view class="" style="font-size: 12px; ">

					<uni-tag text="休息中" v-if="storeInfo.status == 0"/>
					<uni-tag type="primary" text="营业中" v-if="storeInfo.status == 1"/>
				</view>
			</view>
		</view>
		<u-line color="#EBEBEB" ></u-line>
		<view class="adress">
			<uni-icons type="location-filled" size="18"></uni-icons>
			<text style="text-overflow:ellipsis;">{{storeInfo.address}}</text>
			
		</view>
		
		<uni-popup ref="popup" background-color="#fff" @change="change">
			<scroll-view class="popup-content" :scroll-y="true">
				<view v-for="(item,index) in data" :key="index" @click="changeStore(item)">
					<view class="store">
						<img :src="item.image" alt="" style="width: 100rpx; height: 100rpx;border-radius: 50%;"/>
						<text>{{item.name}}</text>
						<view class="" style="font-size: 12px; ">
							<uni-tag text="休息中" v-if="item.status == 0"/>
							<uni-tag type="primary" text="营业中" v-if="item.status == 1"/>
						</view>
					</view>

					<u-line length="95%"></u-line>
				</view>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
import {queryStoreById,pageStore} from "../api/store.js"
	export default {
		name:'homeTop',
		components: {},
		data() {
			return {
				show: false,
				type: 'center',
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				extraIcon:{
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},
				storeInfo:{
					name:'商店名称',
					status:'休息中',
					address:'广西壮族自治区桂林市临桂区榕山路天下桂林步行街5号',
					position:'距离你1.5km',
					image:'https://c-ssl.duitang.com/uploads/blog/202207/24/20220724202317_93315.jpeg'
				},
				data:[
					{
						name:'商店',
						status:'休息中',
						image:'https://c-ssl.duitang.com/uploads/blog/202207/24/20220724202317_93315.jpeg'
					},
					{
						name:'商店',
						status:'休息中',
						image:'https://c-ssl.duitang.com/uploads/blog/202207/24/20220724202317_93315.jpeg'
					},
					{
						name:'商店',
						status:'休息中',
						image:'https://c-ssl.duitang.com/uploads/blog/202207/24/20220724202317_93315.jpeg'
					},
					{
						name:'商店',
						status:'休息中',
						image:'https://c-ssl.duitang.com/uploads/blog/202207/24/20220724202317_93315.jpeg'
					},
				]
			}
		},
		onReady(){
			//获取商店信息
			queryStoreById(this.$store.state.storeId).then(res=>{
				// console.log(res)
				this.$store.dispatch('storeInfo',res.data)
				this.storeInfo = res.data
				console.log(this.storeInfo)
			}).catch(err=>{
				console.log(err)
			})
		},
		methods: {
			onClick(e){
				console.log(e)
			},
			actionsClick(text){
				uni.showToast({
					title:text,
					icon:'none'
				})
			},
			openPopup(){
				const config = {
					page:1,
					pageSize:99
				}
				pageStore(config).then(res=>{
					this.data = res.data.records
					this.$refs.popup.open(this.type)
					
				}).catch(err=>{
					uni.showToast({
						title:'获取商店失败',
						type:'error',
						icon:'none'
					})
				})
				
			},
			changeStore(e){
				console.log(e)
				this.$store.state.storeInfo = e
				this.$store.state.storeId = e.id
				this.storeInfo = e
				this.$store.state.shoppingCartChange = !this.$store.state.shoppingCartChange
				// console.log(this.$store.state.shoppingCartChange)
				this.$refs.popup.close()
				
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
		}
	}
</script>

<style scoped>
.homeTop{
	/* margin-top: 50rpx; */
	width: 100%;
	z-index: 99999;
	position: fixed;
	z-index: 9;
	top: 10rpx;
	left: 30rpx;
	display: flex;
	flex-direction: column;
	width: calc(100% - 60rpx);
	background: white;
	box-shadow: 0px 4rpx 10rpx 0px rgba(69, 69, 69, 0.1);
	border-radius: 8rpx;
	padding: 14rpx 18rpx 22rpx 16rpx;
	box-sizing: border-box;
	margin-top: 120rpx;
	
}

.info{
	display: flex;
	margin-top: 15rpx;
	margin-bottom: 15rpx;
}

.infos{
	margin-left: 25rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 80%;
}

.adress{
	margin-top: 15rpx;
	font-size: 24rpx;
	color: #666;

}

.popup-content {
		/* @include flex; */
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 200px;
		width: 500rpx;
		background-color: #fff;
		border-radius: 15rpx;
}

.store{
	height: 100rpx;
	width: 95%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 15rpx;
}
</style>